@import url("css.css");
html {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(#fec7b3, #fed0bf);
  color: white;
  font-family: "Orbitron", sans-serif;
}

.content {
  display: flex;
  flex-direction: column;
  border-radius: 2rem;
  background-color: white;
  height: 400px;
  width: 300px;
  box-shadow: 0.5rem 0.6rem 1rem rgba(0, 0, 0, 0.3);
}

.display {
  background-color: #7e6359;
  height: 40%;
  border-radius: 2rem 2rem 0 0;
  font-family: "Orbitron", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}
.display__highlight {
  height: 1px;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.4);
  transform: scalex(15) scaley(62) skewx(-60deg) translatex(1.7px);
}
.display__screen {
  color: white;
  padding: 0 0.5rem 0 0.5rem;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
  height: 55%;
  width: 80%;
  background-color: rgba(252, 142, 102, 0.8);
  border-radius: 0.5rem;
}

.calculator {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.calculator .buttons {
  display: grid;
  grid-template-areas: "1 2 3 plus AC" "4 5 6 minus enter" "7 8 9 divide enter" "zero dot resto multiply enter";
  grid-row-gap: 0.5rem;
  grid-column-gap: 0.5rem;
  height: 75%;
  width: 75%;
  font-size: 0.8rem;
}
.calculator .buttons .button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #fe8f67;
  cursor: pointer;
  transition: all 0.3s;
}
.calculator .buttons .enter {
  grid-area: enter;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.calculator .buttons .delete {
  grid-area: AC;
  background-color: #d32f2f;
}
.calculator .buttons #zero {
  grid-area: zero;
}
.calculator .buttons #subtract {
  grid-area: minus;
}
.calculator .buttons #add {
  grid-area: plus;
}
.calculator .buttons #multiply {
  grid-area: multiply;
}
.calculator .buttons #resto {
  grid-area: resto;
}
.calculator .buttons #decimal {
  grid-area: dot;
}
.calculator .buttons .actions {
  background-color: #e76452;
}